﻿<!doctype html>
<!--[if lt IE 7]> <  class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ru"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="ru"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ru"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>2netz</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="common/css/default.css">

    <script src="common/js/jquery-1.7.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div class="container">
    <section id="gridSystem">

        <div class="row show-grid">
          <div class="span3">3</div>
          <div class="span3">3</div>
          <div class="span3">3</div>
          <div class="span3">3</div>
        </div>
        <div class="row show-grid">
          <div class="span12">12</div>
        </div>
        <div class="row show-grid">
          <div class="span12">12</div>
        </div>
        <div class="row show-grid">
          <div class="span3">
              <div class="row-fluid show-grid">
                  <div class="span12">
                      Level 1 of column
                      <div class="row-fluid">
                          <div class="span6 tery">Level 2</div>
                          <div class="span6 tery">Level 2</div>
                      </div>
                      <div class="row-fluid">
                          <div class="span3 tery">Level 4</div>
                          <div class="span3 tery">Level 4</div>
                          <div class="span3 tery">Level 4</div>
                          <div class="span3 tery">Level 4</div>
                      </div>
                  </div>
              </div>
              <div class="row-fluid show-grid" style="margin-left: -100%" id="fgnf">
                  <div class="span12">
                      Level 1 of column
                      <div class="row-fluid">
                          <div class="span6 tery">Level 2</div>
                          <div class="span6 tery">Level 2</div>
                      </div>
                      <div class="row-fluid">
                          <div class="span3 tery">Level 4</div>
                          <div class="span3 tery">Level 4</div>
                          <div class="span3 tery">Level 4</div>
                          <div class="span3 tery">Level 4</div>
                      </div>
                  </div>
              </div>



          </div>
          <div class="span9">

              <div class="row show-grid">
                <div class="span9">
                    <div class="catalog_sorter">
                                        11
                                        </div>
                </div>
                <div class="span3">
                    <div class="catalog_item">
                    11
                    </div>
                </div>
                <div class="span3">
                    <div class="catalog_item">
                    11
                    </div>
                </div>
                <div class="span3">
                    <div class="catalog_item">
                    11
                    </div>
                </div>
                <div class="span3">
                    <div class="catalog_item">
                    11
                    </div>
                </div>
                <div class="span3">
                    <div class="catalog_item">
                    11
                    </div>
                </div>
                <div class="span3">
                    <div class="catalog_item">
                    11
                    </div>
                </div>
              </div>


          </div>
        </div>
        <div class="row show-grid">
          <div class="span3">3</div>
          <div class="span3">3</div>
          <div class="span3">3</div>
          <div class="span3">3</div>
        </div>
        <div class="row show-grid">
          <div class="span6">6</div>
          <div class="span6">6</div>
        </div>
        <div class="row show-grid">
          <div class="span3">3</div>
          <div class="span3">3</div>
          <div class="span3">3</div>
          <div class="span3">3</div>
        </div>
        <div class="row">
          <div class="span4">
            <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
            <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
          </div><!-- /.span -->
          <div class="span4">
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span4"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span8"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
          </div><!-- /.span -->
          <div class="span4">
            <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
          </div><!-- /.span -->
        </div><!-- /.row -->

    </section>
    <br>
    <br>
    <br>
    <br>

    <div class="row-fluid show-grid">
        <div class="span12">
            Level 1 of column
            <div class="row-fluid">
                <div class="span6 tery">Level 2</div>
                <div class="span6 tery">Level 2</div>
            </div>
            <div class="row-fluid">
                <div class="span3 tery">Level 4</div>
                <div class="span3 tery">Level 4</div>
                <div class="span3 tery">Level 4</div>
                <div class="span3 tery">Level 4</div>
            </div>
        </div>
    </div>


</div>
<style type="text/css">
    .tery {
        background: #FF6B4E
    }
</style>
<script type="text/javascript">
    $("#fgnf").bind({
        "mouseenter": function(){
            $(this).animate({
                marginLeft: 0
              }, 200, function() {
                // Animation complete.
              })
        },
        "mouseleave": function(){
            $(this).animate({
                marginLeft: '-100%'
              }, 200, function() {
                // Animation complete.
              })
        },
    });

</script>


</body>
</html>
